/**
 * @description 漏斗多
 * 漏多1 两组数据对比
 * 漏多2 两组数据对比
 * 漏多3 四组数据对比
 * 漏多4 四组数据对比
 * 
 */

import echarts from "../echart"
import { useEffect, useRef } from 'react';
import useChartResize from "@/hooks/useChartResize";
import { getfunnelsMock } from "../mockData";

function Funnel({ configData, chart }) {
  let { title, graphType } = configData
  const chartRef = useRef(null)
  const boxRef = useRef()


  useEffect(() => {

    // 图表配置项
    let themeConfig = chart.funnel

    // 限制数量
    let limitNum = chart.base.funnelNum

    // 基于准备好的dom，初始化echarts实例
    if (!chartRef.current) {
      let myChart = echarts.init(boxRef.current)
      chartRef.current = myChart
    }

    // [1] 获取随机数据
    let [chartData, subNameList] = getfunnelsMock(limitNum)

    switch (graphType) {
      // 限制两组
      case '漏多1':
      case '漏多2':
        chartData = chartData.slice(0, 2)
        break;

      // 限制四组
      case '漏多3':
      case '漏多4':
        chartData = chartData.slice(0, 4)
        break;
    }

    // 漏多
    let series = []
    switch (graphType) {

      case '漏多1':
        chartData.forEach((data, index) => {
          let seriesObj = {}
          // 1,2组数据的差异配置
          if (index === 0) {
            seriesObj.top = '5%'
          } else {
            seriesObj.top = '50%'
            seriesObj.sort = 'ascending'
          }
          seriesObj = {
            ...seriesObj,
            name: subNameList[index],
            data: data,
            type: 'funnel',
            width: '80%',
            height: '45%',
            funnelAlign: 'center',
            left: '10%',
            ...themeConfig.series,
          }
          series.push(seriesObj)
        })
        break;

      case '漏多2':
        chartData.forEach((data, index) => {
          let seriesObj = {}
          // 1,2组数据的差异配置
          if (index === 0) {
            seriesObj.top = '5%'
            seriesObj.sort = 'ascending'
          } else {
            seriesObj.top = '50%'
          }
          seriesObj = {
            ...seriesObj,
            name: subNameList[index],
            data: data,
            type: 'funnel',
            width: '80%',
            height: '45%',
            funnelAlign: 'center',
            left: '10%',
            ...themeConfig.series,
          }
          series.push(seriesObj)
        })
        break;

      case '漏多3':
        chartData.forEach((data, index) => {
          let seriesObj = {}
          // 1,2,3,4组数据的差异配置
          if (index === 0) {
            seriesObj.left = '5%'
            seriesObj.top = '5%'
            seriesObj.sort = 'ascending'
          } else if (index === 1) {
            seriesObj.left = '5%'
            seriesObj.top = '50%'
          } else if (index === 2) {
            seriesObj.left = '55%'
            seriesObj.top = '5%'
          } else {
            seriesObj.left = '55%'
            seriesObj.top = '50%'
            seriesObj.sort = 'ascending'
          }
          seriesObj = {
            ...seriesObj,
            // Todo:subName
            name: subNameList[index],
            data: data,
            type: 'funnel',
            width: '40%',
            height: '45%',
            funnelAlign: 'center',
            ...themeConfig.series,
          }
          series.push(seriesObj)
        })
        break;

      case '漏多4':
        chartData.forEach((data, index) => {
          let seriesObj = {}
          // 1,2,3,4组数据的差异配置
          if (index === 0) {
            seriesObj.left = '5%'
            seriesObj.top = '50%'
            seriesObj.funnelAlign = 'right'
          } else if (index === 1) {
            seriesObj.left = '5%'
            seriesObj.top = '5%'
            seriesObj.funnelAlign = 'right'
            seriesObj.sort = 'ascending'
          } else if (index === 2) {
            seriesObj.left = '55%'
            seriesObj.top = '5%'
            seriesObj.funnelAlign = 'left'
            seriesObj.sort = 'ascending'
          } else {
            seriesObj.left = '55%'
            seriesObj.top = '50%'
            seriesObj.funnelAlign = 'left'
          }
          seriesObj = {
            ...seriesObj,
            name: subNameList[index],
            data: data,
            type: 'funnel',
            width: '40%',
            height: '45%',
            ...themeConfig.series,
          }
          series.push(seriesObj)
        })
        break;
    }

    const options = {
      backgroundColor: themeConfig.backgroundColor,
      color: themeConfig.color,
      title: {
        ...themeConfig.title,
        text: title,
      },
      // 图例组件
      legend: themeConfig.legend,
      // 直角坐标系内绘图网格
      grid: themeConfig.grid,
      // 提示框组件
      tooltip: {
        trigger: 'item',
        formatter: '{a} <br/>{b} : {c}',
        ...themeConfig.tooltip
      },
      series
    }

    // 绘制图表
    chartRef.current.setOption(options, true);

  }, [chart])

  useChartResize(boxRef, chartRef)

  return (
    <div className='chart-box' ref={boxRef} ></div>
  )
}
export default Funnel